<template>
  <!-- <el-row v-if="list.length > 0" :gutter="24">
    <el-col v-for="(item, index) in list" :key="item.id" :span="6">
      <el-card
        shadow="hover"
        :class="{ 'item-top': index > 3 }"
        :body-style="{ padding: 0 }"
        @mouseenter="onMouseEnter(item.id)"
        @mouseleave="enterActiveIndex = ''"
      >
        <div class="template-item-image-layout">
          <el-image :src="item.cover" fit="cover" lazy class="template-item-image" />
          <div v-show="enterActiveIndex === item.id" class="enter-template-layout">
            <el-button type="primary" @click="navigato(item.id)">使用模板</el-button>
          </div>
        </div>
        <h2 class="template-item-title">{{ item.title }}</h2>
        <el-divider style="margin: 12px 0" />
        <div class="template-item-desc">
          <div>
            <span>作者：</span>
            <span>{{ item.author }}</span>
          </div>
          <span>{{ item.read }}</span>
        </div>
      </el-card>
    </el-col>
  </el-row> -->
  <a-row v-if="list.length > 0" :gutter="24">
    <a-col v-for="(item, index) in list" :key="item.id" :span="6">
      <a-card
        :loading="false"
        hoverable
        :class="{ 'item-top': index > 3 }"
        :body-style="{ padding: 0 }"
        @mouseenter="onMouseEnter(item.id)"
        @mouseleave="enterActiveIndex = ''"
      >
        <div class="template-item-image-layout">
          <a-image :src="item.cover" class="template-item-image" />
          <div v-show="enterActiveIndex === item.id" class="enter-template-layout">
            <a-button type="primary" @click="navigato(item.id)">使用模板</a-button>
          </div>
        </div>
        <h2 class="template-item-title">{{ item.title }}</h2>
        <a-divider style="margin: 12px 0" />
        <div class="template-item-desc">
          <div>
            <span>作者：</span>
            <span>{{ item.author }}</span>
          </div>
          <span>{{ item.read }}</span>
        </div>
      </a-card>
    </a-col>
  </a-row>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import type { ITemplateItem } from '../../../http/api';

defineProps<{ list: ITemplateItem[] }>();

const enterActiveIndex = ref('');
function onMouseEnter(tid: string) {
  enterActiveIndex.value = tid;
}

const { push } = useRouter();
function navigato(tid: string) {
  push(`/template/${tid}`);
}
</script>

<style scoped>
.item-top {
  margin-top: 24px;
}
.template-item-image-layout {
  overflow: hidden;
  position: relative;
  height: 240px;
  border-bottom: 1px solid #f0f0f0;
}
.template-item-image {
  height: 100%;
  transition: transform 0.32s ease-out;
}
:deep(.ant-card-hoverable):hover .template-item-image,
.el-card__body:hover .template-item-image {
  transition: box-shadow 0.3s, border-color 0.3s, transform 0.3s;
  transform: scale(1.3);
}
.enter-template-layout {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background-color: rgba(96, 98, 102, 0.9);
}

.template-item-title {
  margin: 0;
  padding: 12px 0 0 12px;
  text-align: left;
  font-size: 16px;
}
.template-item-desc {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 12px 12px 12px;
  font-size: 14px;
  color: #999;
}
</style>
